<template>
  <transition name="bounce">
    <div class="mui-content pd">
      <mh-header headName="投票"> </mh-header>
      <div class="vote-question">
        <div class="vote-item" v-for="(item, index) in voteList" :key="item.id">
          <h4 class="vote-name" v-text="`${index+1}.${item.title}`">-</h4>
          <ul>
            <li class="vote-ch"
                :class="{active: cItem.checked}"
                v-for="(cItem, sindex) in item.choice"
                :key="cItem.id"
                v-text="`${sindex+1}.${cItem.text}`"
                @tap="checkVoItem(index,sindex)"
            >
              --
            </li>
          </ul>
          <div class="mui-text-center">
            <button type="button" class="mui-btn mh-btn" v-show="!item.voted" @tap="confirmVote(index,item.id)">确定</button>
            <button type="button" class="mui-btn mh-btn" v-show="item.voted" disabled>已投</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "interact-vote",
    data () {
      return {
        voteList: [
          {
            id: '1',
            name: '请选出你最喜欢的活动项目',
            choice: [
              {
                id: '1',
                text: '做游戏',
                checked: false
              },
              {
                id: '2',
                text: '聚餐',
                checked: false
              },
              {
                id: '3',
                text: '拍照',
                checked: false
              },
              {
                id: '4',
                text: '配对',
                checked: false
              }
            ],
            voted: true
          },
          {
            id: '2',
            name: '请选出你最喜欢的活动项目',
            choice: [
              {
                id: '1',
                text: '做游戏',
                checked: false
              },
              {
                id: '2',
                text: '聚餐',
                checked: false
              },
              {
                id: '3',
                text: '拍照',
                checked: false
              },
              {
                id: '4',
                text: '配对',
                checked: false
              }
            ],
            voted: false
          },
          {
            id: '3',
            name: '请选出你最喜欢的活动项目',
            choice: [
              {
                id: '1',
                text: '做游戏',
                checked: false
              },
              {
                id: '2',
                text: '聚餐',
                checked: false
              },
              {
                id: '3',
                text: '拍照',
                checked: false
              },
              {
                id: '4',
                text: '配对',
                checked: false
              }
            ],
            voted: false
          }
        ]
      }
    },
    methods: {
      checkVoItem (i, j) {
        this.$set(this.voteList[i].choice[j], 'checked', !this.voteList[i].choice[j].checked)
      },
      confirmVote (i, id) {
        console.log(id);
        this.$set(this.voteList[i], 'voted', true);
        MH_API.confirmVote({
          vote_id: id,
          option: this.voteList[i].text
        }).then(res => {
          if (res.status === 200) {
            mui.toast("投票成功")
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      let id = this.$route.params.id;
      let self = this;
      MH_API.getVoteList({
        activity_id: id
      }).then(res => {
        if (res.status === 200) {
          self.voteList = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .vote-question {
    background: #fff;
    border: 1px solid #fff;
  }
  .vote-item {
    margin-top: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
  }
  .vote-name {
    padding: .5rem 1rem;
    font-size: 1.5rem;
  }
  .vote-ch {
    padding: .5rem 1rem;
    margin-right: 1.5rem;
    font-size: 1.4rem;
    color: #666;
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat right center;
    background-size: 1.5rem 1.55rem;
    &.active {
      background: url("../../assets/images/ico/ic_vo_check.png") no-repeat right center;
      background-size: 1.5rem 1.55rem;
    }
  }
</style>
